<script>
    $(document).ready(function () {
        $(document).on('click', '.preview-button', function () {
            var work_id = $(this).parents('.work-block').find('.work-id').html();
            console.log("work_id=" + work_id);
            var url = '/bus/peek_work_myhistory?' + 'work_id=' + work_id;
            $('#peek-myhistory-table').dataTable().fnClearTable();
            $('#myhistory-peek').modal('show');
            $.ajax({
                type: 'POST',
                url: url,
                success: function (data) {
                    console.log(data);
                    for (var i in data) { //遍历data 数组时，i为索引
                        $('#peek-myhistory-table').dataTable().fnAddData([
                            data[i].business_id,
                            data[i].file_name,
                            data[i].version,
                            fmtDate(data[i].time)
                        ]);
                    }
                },
                error: function (responseStr) {
                    //出错后的动作
                    alert("出错,请联系管理员");
                }
            });
        });
    });
</script>
<div class="page-header">
    <h4 class="page-title">作业清单</h4>
    <ul class="breadcrumbs">
        <li class="nav-home">
            <a href="#">
                <i class="flaticon-home"></i>
            </a>
        </li>
        <li class="separator">
            <i class="flaticon-right-arrow"></i>
        </li>
        <li class="nav-item">
            <a href="#">作业清单</a>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center">
                    <h4 class="card-title">上传作业</h4>
                    <!--<button class="btn btn-primary btn-round ml-auto" data-toggle="modal"
                            data-target="#excelModal">
                        <i class="fa fa-plus"></i>
                        批量上传(beta)
                    </button>-->
                    <button class="btn btn-primary btn-round ml-auto" data-toggle="modal"
                            data-target="#addRowModal">
                        <i class="fa fa-info"></i>
                        Tips
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="modal fade" id="myhistory-peek" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header no-bd">
                                <h5 class="modal-title">
														<span class="fw-mediumbold">
														上传</span>
                                    <span class="fw-light">
															历史
														</span>
                                </h5>
                                <button type="button" class="close" data-dismiss="modal"
                                        aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <!--add row窗口-->
                            <div class="modal-body">
                                <p class="small">当前课程上传历史</p>
                                <div class="row">
                                    <table id="peek-myhistory-table" class="table mt-3">
                                        <thead>
                                        <tr>
                                            <th scope="col">#</th>
                                            <th scope="col">文件名</th>
                                            <th scope="col">提交顺序</th>
                                            <th scope="col">上传时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer no-bd">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">
                                    Close
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <ul class="nav nav-pills nav-secondary nav-pills-no-bd" id="pills-tab-without-border" role="tablist">
                    <li class="nav-item submenu">
                        <a class="nav-link" id="pills-home-tab-nobd" data-toggle="pill" href="#pills-home-nobd"
                           role="tab" aria-controls="pills-home-nobd" aria-selected="false"><i
                                class="fas fa-th-large"></i>&nbsp;&nbsp;全部</a>
                    </li>
                    <li class="nav-item submenu">
                        <a class="nav-link active show" id="pills-contact-tab-nobd" data-toggle="pill"
                           href="#pills-contact-nobd" role="tab" aria-controls="pills-contact-nobd"
                           aria-selected="false"><i
                                class="fas fa-clock"></i>&nbsp;&nbsp;未提交</a>
                    </li>
                    <li class="nav-item submenu">
                        <a class="nav-link" id="pills-profile-tab-nobd" data-toggle="pill" href="#pills-profile-nobd"
                           role="tab" aria-controls="pills-profile-nobd" aria-selected="true"><i
                                class="fas fa-check-circle"></i>&nbsp;&nbsp;已提交</a>
                    </li>
                </ul>
                <div class="tab-content mt-2 mb-3" id="pills-without-border-tabContent">
                    <div class="tab-pane fade" id="pills-home-nobd" role="tabpanel"
                         aria-labelledby="pills-home-tab-nobd">
                        <div id="all-list-div" class="card-list">

                        </div>
                    </div>
                    <div class="tab-pane fade" id="pills-profile-nobd" role="tabpanel"
                         aria-labelledby="pills-profile-tab-nobd">
                        <div id="done-list-div" class="card-list">

                        </div>
                    </div>
                    <div class="tab-pane fade active show" id="pills-contact-nobd" role="tabpanel"
                         aria-labelledby="pills-contact-tab-nobd">
                        <div id="undo-list-div" class="card-list">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Datatables -->
<script src="../../assets/js/plugin/datatables/datatables.min.js"></script>
<!-- Azzara DEMO methods, don't include it in your project! -->
<script src="../../assets/js/setting-demo.js"></script>
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../../assets/css/azzara.min.css">
<!-- CSS Just for demo purpose, don't include it in your project -->
<!--<link rel="stylesheet" href="../../assets/css/demo.css">-->
<script type="text/javascript" src="../static/js/worklist.js"></script>
<link rel="stylesheet" href="../../static/css/ladda-themeless.min.css">
<script src="../../static/js/spin.min.js"></script>
<script src="../../static/js/ladda.min.js"></script>
<script src="../../static/js/jquerysession.js"></script>
<script>
    $('#basic-datatables').DataTable({});

    $('#multi-filter-select').DataTable({
        "pageLength": 5,
        initComplete: function () {
            this.api().columns().every(function () {
                var column = this;
                var select = $('<select class="form-control"><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

    // Add Row
    $('#add-row').DataTable({
        "pageLength": 5,
    });

    var action = '<td> <div class="form-button-action"> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-primary btn-lg" data-original-title="Edit Task"> <i class="fa fa-edit"></i> </button> <button type="button" data-toggle="tooltip" title="" class="btn btn-link btn-danger" data-original-title="Remove"> <i class="fa fa-times"></i> </button> </div> </td>';

</script>
